<template>
    <div>
        <el-col :span="12">
            <div>
                <FullCalendar></FullCalendar>

                <div class="kbBox">
                    <el-table
                            :data="classList"
                            border
                            style="width: 100%"
                            class="courseForm"
                            :header-cell-style="{ background: '#5D87EB', color: '#fff' }"
                    >
                        <el-table-column
                                prop="Course"
                                label="课时/节次"
                                width="100"
                        ></el-table-column>
                        <el-table-column prop="one" label="周一" width="103"></el-table-column>
                        <el-table-column prop="two" label="周二" width="110"></el-table-column>
                        <el-table-column prop="three" label="周三" width="110"></el-table-column>
                        <el-table-column prop="four" label="周四" width="100"></el-table-column>
                        <el-table-column prop="five" label="周五" width="120"></el-table-column>
                        <el-table-column prop="five" label="周六" width="120"></el-table-column>
                        <el-table-column prop="five" label="周日" width="120"></el-table-column>
                    </el-table>
                </div>
            </div>
        </el-col>
        <el-col :span="2">
            <el-steps direction="vertical" style="height: 40em;">
                <el-step title="添加约束"></el-step>
                <el-step title="添加约束"></el-step>
                <el-step title="添加约束"></el-step>
                <el-step title="添加约束"></el-step>
            </el-steps>
        </el-col>
        <el-col :span="10">
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="用户约束" name="UserConstraint">
                        <UserConstraint></UserConstraint>
                    </el-tab-pane>
                    <el-tab-pane label="班级约束" name="ClassRoomConstraint">
                        <ClassRoomConstraint></ClassRoomConstraint>
                    </el-tab-pane>
                    <el-tab-pane label="课程约束" name="CourseConstraint">
                        <CourseConstraint></CourseConstraint>
                    </el-tab-pane>
                    <el-tab-pane label="查询" name="QueryConstraint">
                        <QueryConstraint></QueryConstraint>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-col>
    </div>
</template>

<script>
    import CourseConstraint from "./CourseConstraint";
    import ClassRoomConstraint from "./ClassRoomConstraint";
    import UserConstraint from "./UserConstraint";
    import QueryConstraint from "./QueryConstraint";


    export default {
        name: "TimetableManage",
        components: {
            CourseConstraint,
            ClassRoomConstraint,
            UserConstraint,
            QueryConstraint,
        },
        data() {
            return {
                activeName: 'second',
                weeks: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
                classList: [
                    {
                        Course: "第一节",
                        one: "语文",
                        two: "数学",
                        three: "科学",
                        four: "地理",
                        five: "生物",
                    },
                    {
                        Course: "第二节",
                        one: "语文",
                        two: "数学",
                        three: "英语",
                        four: "地理",
                        five: "生物",
                    },
                    {
                        Course: "第三节",
                        one: "语文",
                        two: "数学",
                        three: "英语",
                        four: "地理",
                        five: "生物",
                    },
                    {
                        Course: "第四节",
                        one: "语文",
                        two: "数学",
                        three: "英语",
                        four: "地理",
                        five: "生物",
                    },
                    {
                        Course: "第五节",
                        one: "语文",
                        two: "数学",
                        three: "英语",
                        four: "地理",
                        five: "生物",
                    },],
                tableShow: false
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
        }
    }
</script>

<style>
    .dividerClass {
        height: 40em;
    }

</style>